<template>
  <div>
    <!-- 路由标签页切换动画效果，参考 element-plus 的文档 https://element-plus.org/zh-CN/guide/transitions.html -->
    <el-collapse-transition>
      <div v-show="props.data">
        <!-- 路由标签页 -->
        <el-tabs
            v-model="editableTabsValue"
            type="card"
            editable
            @edit="handleTabsEdit"
        >
          <el-tab-pane
              v-for="item in editableTabs"
              :key="item.name"
              :label="item.title"
              :name="item.name"
          >
            {{ item.content }}
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { TabPaneName } from 'element-plus'

const isTabsShow = ref(true)
// 定义组件 props 即父组件传过来的值
const props = defineProps({
  // svg 图标前缀
  data: {
    type: Boolean,
    default: true,
  },
})


let tabIndex = 2
const editableTabsValue = ref('2')
const editableTabs = ref([
  {
    title: 'Tab 1',
    name: '1',
    content: 'Tab 1 content',
  },
  {
    title: 'Tab 2',
    name: '2',
    content: 'Tab 2 content',
  },
])

const handleTabsEdit = (
    targetName: TabPaneName | undefined,
    action: 'remove' | 'add'
) => {
  if (action === 'add') {
    const newTabName = `${++tabIndex}`
    editableTabs.value.push({
      title: 'New Tab',
      name: newTabName,
      content: 'New Tab content',
    })
    editableTabsValue.value = newTabName
  } else if (action === 'remove') {
    const tabs = editableTabs.value
    let activeName = editableTabsValue.value
    if (activeName === targetName) {
      tabs.forEach((tab, index) => {
        if (tab.name === targetName) {
          const nextTab = tabs[index + 1] || tabs[index - 1]
          if (nextTab) {
            activeName = nextTab.name
          }
        }
      })
    }

    editableTabsValue.value = activeName
    editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
  }
}
</script>

<style scoped lang="scss">
// 去除 el-tabs 自带的 content 显示，只保留 tab 内容
:deep(.el-tabs__content) {
  display: none;
}
// 去除 el-tabs 自带的 tab 下外边距样式，默认和 tab 内容存在 15px 的间距
:deep(.el-tabs__header) {
  margin: 0;
}
// 修改 el-tabs 自带的 tab 选中激活样式
:deep(.el-tabs__header .el-tabs__item.is-active) {
  border-bottom: 2px solid #79bbff;
  background-color: #ecf5ff;
}
// 以下是样式是 tab 项悬浮样式
:deep(.el-tabs__header .el-tabs__item) {
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
// 鼠标悬浮在 tab 项上时，显示悬浮样式，非激活状态的 tab 项上悬浮样式
:deep(.el-tabs__item:not(.is-active):before) {
  content: "";
  position: absolute;
  z-index: -1;
  left: 51%;
  right: 51%;
  bottom: 0;
  background: #79bbff;
  height: 2px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
:deep(.el-tabs__item:hover:before,
.el-tabs__item:focus:before,
.el-tabs__item:active:before) {
  left: 0;
  right: 0;
}
</style>
